<template>
  <a-table :columns="columns" :data="data" :pagination="false">
    <template #index="{ rowIndex }">
      {{ rowIndex + 1 }}
    </template>
    <template #isSuccess="{ record }">
      <span
        :class="record.isSuccess === '1' ? 'import-success' : 'import-err'"
        >{{ record.isSuccess === '1' ? '成功' : '失败' }}</span
      >
    </template>
  </a-table>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  const columns = ref([
    {
      title: '序号',
      dataIndex: 'index',
      slotName: 'index',
      width: 60,
    },
    {
      title: '密级',
      dataIndex: 'secretLevel',
      slotName: 'secretLevel',
      width: 120,
    },
    {
      title: '执行人',
      dataIndex: 'operator',
    },
    {
      title: '执行时间',
      dataIndex: 'operateTime',
    },
    {
      title: '是否成功',
      dataIndex: 'isSuccess',
      slotName: 'isSuccess',
    },
    {
      title: '错误日志',
      dataIndex: 'errorLog',
    },
  ]);
  const data = ref([
    {
      id: '111',
      secretLevel: '1',
      operator: 'ces1',
      operateTime: '2024',
      isSuccess: '1',
      errorLog: 'err',
    },
    {
      id: '2222',
      secretLevel: '2',
      operator: 'ces1',
      operateTime: '2024',
      isSuccess: '2',
      errorLog: 'err',
    },
  ]);
</script>

<style lang="less" scoped>
  .import-success {
    color: #2ca340;

    &::before {
      display: inline-block;
      width: 6px;
      height: 6px;
      margin-right: 4px;
      margin-bottom: 2px;
      background: #2ca340;
      border-radius: 3px;
      content: '';
    }
  }

  .import-err {
    color: #d40000;

    &::before {
      display: inline-block;
      width: 6px;
      height: 6px;
      margin-right: 4px;
      margin-bottom: 2px;
      background: #d40000;
      border-radius: 3px;
      content: '';
    }
  }
</style>
